<template>
    <view>
        <cu-custom bgColor="bg-gradual-green">
            <block slot="content">问答</block>
        </cu-custom>

        <view>
            <tutor-item v-for="question in questionList" :question="question" :key="question.question_id" @item-click="goToQuDetail(question)">
            </tutor-item>
        </view>

        <button class="post-btn bg-green text-xxl shadow" @click="goToCreate">
            <text class="cuIcon-post"></text>
        </button>
    </view>
</template>

<script>
import tutorItem from './tutorItem';
import {
    TUTOR_API,
} from '@/API.js';
import {uploadFiles, requestCreateQu, toast} from './request';
import {createQuestionData, parseBackendQuList} from './tutor';

export default {
    components: {
        tutorItem,
    },
    onLoad() {
        uni.$on('create-question', (data) => {
            let imageUrl = uploadFiles(data.content.images);    //上传照片的返回值
            imageUrl.then((res) => {
                let questionData = createQuestionData(data, res);  //要上传的问题数据
                // console.log('new question = ', questionData);
                this.createQuestion(questionData);
            });
        });

    },
    onUnload() {
        uni.$off('create-question');
    },
    data() {
        return {
            questions: []
        };
    },
    onShow: function() {
        uni.request({
            url: TUTOR_API.quList.url,
            method: TUTOR_API.quList.method,
            header: {
                'http-token': getApp().globalData.user.token
            },
            success: (res) => {
                if(res.statusCode == 200) {
                    this.questions = res.data;
                }else if(res.statusCode == 401) {
                    toast('请登录');
                }else{
                    toast(res.data);
                }
            }
        });
    },
    methods: {
        goToQuDetail: function(question) {
            uni.navigateTo({
                url: '/pages/tutor/quDetail/quDetail?question=' + encodeURIComponent(JSON.stringify(
                    question))
            });
        },
        goToCreate: function() {
            uni.navigateTo({
                url: '/pages/tutor/createQuestion/createQuestion',
                success: function() {},
                fail: function() {}
            });
        },
        createQuestion: function(sendMessage) {
            requestCreateQu(sendMessage).then((res) => {
                if (res.statusCode == 200) {
                    this.questions.push(res.data);
                    // console.log('Create question', res.data);
                } else {
                    toast('创建问题失败');
                }
            });
        }
    },
    computed: {
        questionList: function() {
            //问题倒叙排列
            return parseBackendQuList(this.questions);
        }
    }
};
</script>

<style lang="scss" scoped>
    $btnSize: 100rpx;
    $offset: 40rpx;

    .post-btn {
        width: $btnSize;
        height: $btnSize;
        position: fixed;
        display: inline-flex;
        border-radius: 50%;
        bottom: $offset;
        right: $offset;
        z-index: 100;
        justify-content: center;
        align-items: center;
    }

    .post-btn.button-hover {
        transform: translate(1px, 1px);
    }
</style>
